<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        body {
            margin-top: 20px;
        }

        .box {
            font-size: 13px;
            margin: 0 auto;
            width: 80%;
        }

        .box-head {
            padding: 15px 20px;
            font-size: 14px;
            text-align: center;
            font-size: 24px;
            font: bolder;
        }

        .box-body {
            padding: 10px 20px;
        }

        .box-body th {
            font-weight: normal;
            vertical-align: top;
            padding-top: 12px;
        }

        .box-body tr:last-child {
            text-align: center;
        }

        .box-body input {
            vertical-align: middle;
            font-family: Tahoma, simsun;
            font-size: 12px;
        }

        .box-body input[type=text],
        .box-body input[type=password] {
            border-color: #bbb;
            height: 38px;
            font-size: 14px;
            border-radius: 2px;
            outline: 0;
            border: #ccc 1px solid;
            padding: 0 10px;
            width: 350px;
            -webkit-transition: box-shadow .5s;
            margin-bottom: 15px;
        }

        .box-body input[type=text]:hover,
        .box-body input[type=text]:focus,
        .box-body input[type=password]:hover,
        .box-body input[type=password]:focus {
            border: 1px solid #56b4ef;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px rgba(82, 168, 236, .6);
            -webkit-transition: box-shadow .5s;
        }

        .box-body input::-webkit-input-placeholder {
            color: #999;
            -webkit-transition: color .5s;
        }

        .box-body input:focus::-webkit-input-placeholder,
        input:hover::-webkit-input-placeholder {
            color: #c2c2c2;
            -webkit-transition: color .5s;
        }

        .box-body input[type=submit] {
            padding: 4px 15px;
            cursor: pointer;
            width: 120px;
            height: 40px;
            background: #4393C9;
            border: 1px solid #fff;
            color: #fff;
            font: 16px bolder;
        }

        .box-body .error {
            border: 1px solid #FF3300;
            background: #FFF2E5;
            font-size: 10px;
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
            padding: 0 10px;
        }

        .box-body .success {
            border: 1px solid #01BE00;
            background: #E6FEE4;
            font-size: 10px;
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
            padding: 0 10px;
        }
    </style>
    <link rel="stylesheet" href="case03.css">
</head>
<body>
    <h2>表单验证</h2>
    <div class="box">
        <div class="box-head">填写注册信息</div>
        <div class="box-body">
                <table>
                    <tr><th>用户名称：</th>
                        <td>
                            <input type="text" name="username" placeholder="长度4~12，英文大小写字母"></td>
                        <td>
                            <div></div>
                        </td>
                    </tr>
                    <tr><th>密　　码：</th>
                        <td>
                            <input type="password" name="pwd" placeholder="长度6~20，大小写字母、数字或下划线"></td>
                        <td>
                            <div></div>
                        </td>
                    </tr>
                    <tr><th>确认密码：</th>
                        <td>
                            <input type="password" name="repwd" placeholder="请再次输入密码进行确认"></td>
                        <td>
                            <div></div>
                        </td>
                    </tr>
                    <tr><th>手机号码：</th>
                        <td>
                            <input type="text" name="tel" placeholder="13、14、15、17、18开头的11位手机号"></td>
                        <td>
                            <div></div>
                        </td>
                    </tr>
                    <tr><th>电子邮箱：</th>
                        <td>
                            <input type="text" name="email" placeholder="用户名@域名（域名后缀至少2个字符）"></td>
                        <td>
                            <div></div>
                        </td>
                    </tr>
                    <tr><td colspan="3"><input type="submit" value="注册"></td>
                    </tr>
                </table>
<script>

// 获取所有input元素
var inputs = document.getElementsByTagName('input');
// 为每个input元素添加失去焦点事件
for (var i = 0; i < inputs.length - 1; ++i) {
  inputs[i].onblur = inputBlur;
}

function inputBlur() {
  var name = this.name;           // 获取输入框的name值
  var val = this.value;           // 获取输入框的value值
  var tips = this.placeholder;    // 获取输入框中的提示信息
  // 获取提示信息显示的div元素对象
  var tips_obj = this.parentNode.nextSibling.firstChild;  
  //去掉两端的空白字符
  val = val.trim();
  //文本框内容为空，给出提示信息
  if (!val) {
    error(tips_obj, '输入框不能为空');
    return false;
  }
  // 获取正则匹配规则和提示信息
  var reg_msg = getRegMsg(name, tips);
}
function error(obj,msg){//显示验证失败提示信息
    obj.className='error';
    obj.innerHTML=msg+',请重新输入';
}

// 根据input的name值，设置正则规则及提示信息
function getRegMsg(name, tips) {
  var reg = msg = '';
  switch (name) {
    case 'username':
      reg = /^[a-zA-Z]{4,12}$/;
      msg = {'success': '用户名输入正确', 'error': tips};
      break;
    case 'pwd':
      reg = /^\w{6,20}$/;
      msg = {'success': '密码输入正确', 'error': tips};
      break;
    case 'repwd':
      var con = document.getElementsByTagName('input')[1].value;
      reg = RegExp("^" + con + "$");
      msg = {'success': '两次密码输入正确', 'error': '两次输入的密码不一致'};
      break;
    case 'tel':
      reg = /^1[34578]\d{9}$/;
      msg = {'success': '手机号码输入正确', 'error': tips};
      break;
    case 'email':
      reg = /^(\w+(\_|\-|\.)*)+@(\w+(\-)?)+(\.\w{2,})+$/;
      msg = {'success': '邮箱输入正确', 'error': tips};
      break;
    }
    return {'reg': reg, 'msg': msg};
}

if(reg_msg['reg'].text(val)){
    //匹配成功，显示成功的提示信息
    success(tip_obj,reg_msg['msg']['success']);
}else{
    //匹配失败，显示失败的提示信息
    error(tips_obj,res_msg['msg']['error']);
}
function success(obj, msg) {
  obj.className = 'success';
  obj.innerHTML = msg;
}
</script>
 <p><a href="default.html">返回目录</a></p>
 <p><a href="第九章.html">返回第九章</a></p>
 <p><a href="第十章.html">下一章</a></p>
</body>
</html>